05. Why Two Lines?
weird example
The process of positioning elements is often a BIG source of frustration for web developers in general - not just for new web developers. Most of the rules are straightforward, but every once in a while a gotcha shows up and stumps even the most experienced developers.
For instance, take a look at this example of a container with two child inline-block elements, each with a width of 50%.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Why two lines?</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<style>
* {
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
}
.blue {
background-color: #02b3e4;
}
.boxed {
border: 2px solid #2e3d49;
}
.container {
background-color: #dbe2e8;
padding: 8px;
}
.child {
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="blue boxed child">Child 1</div>
<div class="blue boxed child">Child 2</div>
</div>
</body>
</html>Given that both children get laid out like inline elements and take up half the width of the container, you should be safe in assuming that they should render on the same line. Two halves should make a whole.
But that's not what happens. Take a look.
inline blocks on two lines
Why are the children on two separate lines? Shouldn't 50% + 50% = 100%?
whaaaat
Pretty weird, right? For this quiz, I want you to use your browser's developer tools with this weird example to make the inline-block children display on the same line. Once you've done that, answer the question below on why the elements start on two lines.
Let me give you a hint before you start: you may need to right-click on an element in the Elements panel and select "Edit as HTML".
why two lines?